<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        button {
            cursor: pointer;
        }

        input[type=checkbox] {
            cursor: pointer;
        }

        /*  */
        .ul_1 {
            width: 1200px;
            height: 100px;
            border: 2px solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: auto;
            flex-shrink: 1;
        }

        .li {
            width: 200px;
            height: 100%;
            text-align: center;
            line-height: 100px;
            font-weight: 900;
            font-size: 25px;
            color: red;
            cursor: pointer;
        }

        .lis {
            color: white;
            background-color: red;
            width: 200px;
            height: 100%;
            text-align: center;
            line-height: 100px;
            font-weight: 900;
            font-size: 25px;
            cursor: pointer;
        }

        /*  */
        .box {
            width: 1200px;
            border: 2px solid;
            border-radius: 0 0 15px 15px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            margin: auto;
            padding: 30px 0;
        }

        th {
            padding: 20px;
        }
    </style>
</head>

<body>
    <h1 style="margin: auto;display: block;width: 200px;text-align: center;">热销爆款</h1>
    <ul class="ul_1"></ul>
    <div class="box"></div>
    <h1 style="margin: auto;display: block;width: 200px;text-align: center;">购物车</h1>
    <table border="2" cellspacing="0" width="100%" align="center" style="margin: auto;">
        <thead>
            <tr>
                <th><input type="checkbox" disabled>全选</th>
                <th colspan="2">商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <th width="100px"><button class="select" onclick="selects()" disabled>删除选中的商品</button></th>
                <th><button class="all" onclick="Clear()" disabled>清理购物车</button></th>
                <th colspan="2">
                    已选择
                    <span class="quantity" style="color: red;font-weight: 900;font: size 22px;;">0</span>
                    件商品
                </th>
                <th colspan="2">
                    总价：
                    <span>￥</span>
                    <span class="Pricea_All" style="color: red;font-weight: 900;font: size 22px;;">0</span>
                </th>
                <th><button class="Results" onclick="money()" disabled>去结算</button>
                </th>
            </tr>
        </tfoot>
    </table>
    <!-- CDN引⼊JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 异步
        window.onload = () => {
            data(0)
            $('thead input').on('click', select_all)
        }
        // 商品数据
        var Goods = [
            {
                type: '空调',
                data: [
                    {
                        id: 1,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/307624/5/5178/166110/68386306F554767a3/f95b9b61525eed23.jpg',
                        name: '奥克斯',
                        price: 1599,
                    },
                    {
                        id: 2,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/295318/24/7140/122273/68372e0fF203ebc7b/7c44bd5ffcaf8ab7.jpg',
                        name: '小米',
                        price: 1699,
                    },
                    {
                        id: 3,
                        img: 'https://img14.360buyimg.com/n7/jfs/t1/321504/2/5035/117618/68391676Fddf73f92/10198f7cf07b53b7.jpg',
                        name: '美的',
                        price: 1949,
                    },
                    {
                        id: 4,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/306039/13/6046/110860/6837daa9Feca228b7/ba57c9efa0e56e86.jpg',
                        name: '格力',
                        price: 2399,
                    },
                    {
                        id: 5,
                        img: 'https://img14.360buyimg.com/n7/jfs/t1/320610/5/5087/163573/68394d01F3ce374f1/e2aa16cde8d2c556.jpg',
                        name: '美的',
                        price: 1949,
                    },
                    {
                        id: 6,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/286722/3/10751/120776/68381011Fea1fbe03/355e4644f61a7ac2.jpg',
                        name: '华菱',
                        price: 2499,
                    },
                    {
                        id: 7,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/302789/23/10597/51260/683816caF9d622576/7a9b532a942a3d45.jpg',
                        name: '统帅',
                        price: 1599,
                    },
                    {
                        id: 8,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/313665/23/4949/181082/6837dccaFfac79fd4/987b093f596d4396.jpg',
                        name: '海尔',
                        price: 1849,
                    }
                ]
            },
            {
                type: '平板电脑',
                data: [
                    {
                        id: 11,
                        img: 'https://img14.360buyimg.com/n7/jfs/t1/271078/9/1561/71010/67cfe5a7F9aeb43d8/bce3669c5289bb2b.jpg',
                        name: '华为',
                        price: 1599,
                    },
                    {
                        id: 21,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/316957/17/4357/113537/6836bb37Fa7257571/10e4293954528971.jpg',
                        name: '苹果',
                        price: 3819,
                    },
                    {
                        id: 31,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/302684/29/10263/106832/6836b072F4c5c2cd9/9a44fbaff9352048.jpg',
                        name: '小米',
                        price: 1699,
                    },
                    {
                        id: 41,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/290614/12/10257/47220/68368b4cFdad86fb2/36b1f439ec2a6e5b.png',
                        name: '苹果',
                        price: 2979,
                    },
                    {
                        id: 51,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/315249/17/3475/43594/6830659cFc3ad451f/c5f87856ee952cef.jpg',
                        name: '华为',
                        price: 1349,
                    },
                    {
                        id: 61,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/316836/37/4378/104528/6836b0d5F6524f6d6/7b17bdae9be3b0e3.jpg',
                        name: '小米',
                        price: 799,
                    },
                    {
                        id: 71,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/262399/5/13094/58071/678a2258F8222af7d/c09639f8cc7635e9.png',
                        name: '华为',
                        price: 888,
                    },
                    {
                        id: 81,
                        img: 'https://img14.360buyimg.com/n7/jfs/t1/258451/28/17837/580869/67a6c325Fa55d40c5/ad9c7dcfae1ad7cd.png',
                        name: '小米',
                        price: 2579,
                    }
                ]
            },
            {
                type: '生活电器',
                data: [
                    {
                        id: 12,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/291390/34/8613/177617/6837ca7bF101cb10f/d0c6705a7ff11b04.jpg',
                        name: '净水壶',
                        price: 134,
                    },
                    {
                        id: 22,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/316973/31/4614/159712/683836abF66be3362/5dc469c4ec00a526.jpg',
                        name: '电蒸锅',
                        price: 115,
                    },
                    {
                        id: 32,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/313136/20/5198/116638/683869bdF9d066879/ef22000550f76e07.jpg',
                        name: '吹风机',
                        price: 68,
                    },
                    {
                        id: 42,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/295520/18/9474/180948/68395b35F21ea9836/6d7060c8554dcf0f.jpg',
                        name: '落地扇',
                        price: 159,
                    },
                    {
                        id: 52,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/299534/2/11491/160366/68380a54Ff723f144/28bf921ab277d6c0.jpg',
                        name: '电饭煲',
                        price: 139,
                    },
                    {
                        id: 62,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/312179/25/5381/124120/6839466aFac5783eb/37f85d52abda094d.jpg',
                        name: '洗衣机',
                        price: 279,
                    },
                    {
                        id: 72,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/233828/8/32568/55002/67e4b915Fd3396d24/a7a953737be635e7.png',
                        name: '吸尘器',
                        price: 99,
                    },
                    {
                        id: 82,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/310972/12/5455/51611/6839637eFccebedc8/221447a8f163e548.jpg',
                        name: '加湿器',
                        price: 72,
                    },
                ]
            },
            {
                type: '洗衣机',
                data: [
                    {
                        id: 13,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/292971/38/9647/191372/68342e0dF4234066c/0dd2e90549ad1463.jpg',
                        name: '小天鹅',
                        price: 1249,
                    },
                    {
                        id: 23,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/312179/25/5381/124120/6839466aFac5783eb/37f85d52abda094d.jpg',
                        name: '至高全自动洗衣机',
                        price: 276,
                    },
                    {
                        id: 33,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/286489/36/3232/225253/68382bcfF966a1d71/fb47dd52c00aad36.jpg',
                        name: '海尔',
                        price: 1249,
                    },
                    {
                        id: 43,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/300462/16/10026/211014/683955e1Ff07e2f81/ff1318ea66b916da.jpg',
                        name: '美的',
                        price: 600,
                    },
                    {
                        id: 53,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/289204/19/2144/173642/683849f7F131ffebd/1eabfa7f574d1f01.jpg',
                        name: '西门子',
                        price: 2499,
                    },
                    {
                        id: 63,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/315693/34/3199/103603/682eecd6Fc4ee429d/3a0536dbdfb5768c.jpg',
                        name: '松下',
                        price: 10999,
                    },
                    {
                        id: 73,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/299993/1/10141/166518/68367e2eF9ee9ac18/ed4f0ff2dd055e08.jpg',
                        name: '松下',
                        price: 9499,
                    },
                    {
                        id: 83,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/290648/35/10328/171800/683816e6F3e9b65ac/3f131eef1cccbbff.jpg',
                        name: '西门子',
                        price: 3999,
                    },
                ]
            },
            {
                type: '冰箱',
                data: [
                    {
                        id: 14,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/308913/3/5289/165401/68386387F011aa17b/32fe02644bc0ba3a.jpg',
                        name: '西门子',
                        price: 7590,
                    },
                    {
                        id: 24,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/271587/11/22870/90058/6800f0c4F3ef8f83a/3f966208e874a481.jpg',
                        name: '至高',
                        price: 238,
                    },
                    {
                        id: 34,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/313769/31/5063/198245/68382dbcF8adc54de/fa617f66b43a99a4.jpg',
                        name: '美的',
                        price: 988,
                    },
                    {
                        id: 44,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/309986/18/1650/118682/68281b2aF42bac255/278a922b5e205b11.png',
                        name: '海尔',
                        price: 348,
                    },
                    {
                        id: 54,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/302349/19/10517/168654/683848ecFb2320c1f/95ddd7c77162114a.jpg',
                        name: '美的',
                        price: 1888,
                    },
                    {
                        id: 64,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/295811/15/10486/138449/6838354bF307b1ebc/f3273a93f6e4e77c.jpg',
                        name: '统帅',
                        price: 798,
                    },
                    {
                        id: 74,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/307145/29/5194/126387/68382cfcFe8793454/1eb709a7a390ba9e.jpg',
                        name: '华菱',
                        price: 799,
                    },
                    {
                        id: 84,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/310042/20/4800/164151/6836e917F8cc096af/1fa45cf2e6dd3636.jpg',
                        name: '小米',
                        price: 1799,
                    },
                ]
            },
            {
                type: '厨房大电',
                data: [
                    {
                        id: 15,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/307870/28/4604/117507/6835840dF37fd04b4/2dc73d81c4a9f15a.jpg',
                        name: '苏泊尔',
                        price: 529,
                    },
                    {
                        id: 25,
                        img: 'https://img13.360buyimg.com/n7/jfs/t1/278027/31/17588/105702/67f4a8d6Feae5088e/f437851a7d5e3c10.jpg',
                        name: '电火锅',
                        price: 218,
                    },
                    {
                        id: 35,
                        img: 'https://img13.360buyimg.com/n2/jfs/t1/260854/34/13875/142629/678dd490F35821222/d7c909bc83564214.jpg',
                        name: '燃气灶',
                        price: 230,
                    },
                    {
                        id: 45,
                        img: 'https://img12.360buyimg.com/n7/jfs/t1/294283/6/7148/129129/6837c81fF534d38f9/0d41a5c22e638815.jpg',
                        name: '电磁炉',
                        price: 134,
                    },
                    {
                        id: 55,
                        img: 'https://img10.360buyimg.com/n7/jfs/t1/181800/12/38749/108998/65193861F355ad453/149b18b00a8d52dd.jpg',
                        name: '油烟机',
                        price: 1168,
                    },
                    {
                        id: 65,
                        img: 'https://img14.360buyimg.com/n7/jfs/t1/289816/13/9793/238192/6837d53cFb24ada71/869cf5661e5edb41.jpg',
                        name: '烤锅',
                        price: 399,
                    },
                    {
                        id: 75,
                        img: 'https://img14.360buyimg.com/n7/jfs/t1/296682/31/9672/141184/683019ecFcbdc8b60/68dd9f630ecf84d4.jpg',
                        name: '打磨机',
                        price: 59,
                    },
                    {
                        id: 85,
                        img: 'https://img11.360buyimg.com/n7/jfs/t1/303726/35/5395/80458/68343af1Fdfc67589/d62d66d033fd0082.jpg',
                        name: '电饭煲',
                        price: 341,
                    },
                ]
            },
        ]
        // 购物车数据
        var car = []
        // 渲染商品
        function data(a) {
            $('.ul_1').html('')
            $.each(Goods, (index, item) => {
                $('.ul_1').append(`<li class='li' onclick='ul(${index})'>${item.type}</li>`)
            })
            $('.box').html('')
            $.each(Goods[a].data, (index, item) => {
                $('.box').append(`
                <div onclick="jia(${a},${item.id})" style='cursor: pointer;'>
                    <img src="${item.img}" alt="" width="100px" height="100px">
                    <div>${item.name}</div>
                    <div>￥<span style='color:red;font-weight:900;'>${item.price}</span></div>
                </div>
                `)
            })
            $('.ul_1 li').eq(a).toggleClass('lis')
        }
        // tab切换
        function ul(index) {
            data(index)
        }
        // 加入购物车
        function jia(a, id) {
            if (!car.some(item => item.id == id)) {
                var arr = Goods[a].data.find(item => item.id == id)
                car.push({
                    id: arr.id,
                    img: arr.img,
                    name: arr.name,
                    price: arr.price,
                    num: 1,
                    falg: false,
                    disabled: true
                })
            } else if (car.some(item => item.id == id)) {
                car.find(item => item.id == id).num++
                car.find(item => item.id === id).disabled = false
            }
            $('thead input').prop('checked', car.every(item => item.falg))
            $('thead input').prop('disabled', false)
            $('.all').prop('disabled', false)
            goods()
        }
        // 渲染购物车
        function goods() {
            $('tbody').html('')
            $.each(car, (index, item) => {
                $('tbody').append(`
                <tr>
                    <th><input type="checkbox" ${item.falg ? 'checked' : ''} onclick='radio(${item.id})'></th>
                    <th width="200px"><img src="${item.img}" alt="" width="100px" height="100px"></th>
                    <th width="200px">${item.name}</th>
                    <th>￥${item.price}</th>
                    <th>
                        <button class='minus_${item.id}' onclick='minus(${item.id})' ${item.disabled ? 'disabled' : ''}>➖</button>
                        <span>${item.num}</span>
                        <button onclick='add(${item.id})'>➕</button>
                    </th>
                    <th>￥${item.price * item.num}</th>
                    <th><button onclick='del(${item.id})'>删除</button></th>
                </tr>
                `)
            })
            $('.Results').prop('disabled', !car.some(item => item.falg))
            $('.select').prop('disabled', !car.some(item => item.falg))
            PriceaAll()
        }
        // 删除    
        function del(id) {
            if (window.confirm('确定删除？')) {
                car.splice(car.findIndex(item => item.id === id), 1)
                if (car == '') {
                    $('thead input').prop('disabled', true)
                    $('.all').prop('disabled', true)
                }
                goods()
            }
        }
        // 增加购买数量
        function add(id) {
            car.find(item => item.id === id).num++
            car.find(item => item.id === id).disabled = false
            goods()
        }
        // 减少购买数量
        function minus(id) {
            if (car.find(item => item.id === id).num > 1) {
                car.find(item => item.id === id).num--
            }
            if (car.find(item => item.id === id).num < 2) {
                car.find(item => item.id === id).disabled = true
            }
            goods()
        }
        // 全选按钮
        function select_all() {
            car.forEach(item => item.falg = this.checked)
            goods()
            PriceaAll()
        }
        // 购物车商品单选状态
        function radio(id) {
            car.find(item => item.id === id).falg = event.target.checked
            $('thead input').prop('checked', car.every(item => item.falg))
            goods()
        }
        // 算总价
        function PriceaAll() {
            $('.quantity').text(car.filter(item => item.falg).reduce((a, b) => a += b.num, 0))
            $('.Pricea_All').text(car.filter(item => item.falg).reduce((a, b) => a += b.price * b.num, 0))
        }
        // 清空购物车
        function Clear() {
            car = []
            event.target.disabled = true
            $('thead input').prop('checked', false)
            $('thead input').prop('disabled', true)
            goods()
        }
        // 删除选中的购物车商品
        function selects() {
            car = car.filter(item => !item.falg)
            $('.select').prop('disabled', true)
            goods()
        }
        // 结算购物车
        function money() {
            if (window.confirm(`当前需支付${$('.Pricea_All').text()}元，请确认支付？`)) {
                alert(`购买成功，账户支付${$('.Pricea_All').text()}元！`)
                selects()
            }
        }
    </script>
</body>

</html>